<template>

  <div id="bug-edit">
    <top></top>
    <div id="create-bug">
      <div class="title">新建Bug</div>
      <div class="content">
        <div class="row">
          <div>Bug标题</div>
          <div>
            <div style="width:50%">
              <el-input v-model="title" placeholder="请输入内容" show-word-limit maxlength="30"></el-input>
            </div>
          </div>
        </div>

        <div class="row">
          <div>默认版本</div>
          <div>
            <div style="width:50%">
              <el-input v-model="version" placeholder="请输入内容" show-word-limit maxlength="20"></el-input>
            </div>
          </div>
        </div>

        <div class="row">
          <div>优先级</div>
          <div>
            <el-radio-group v-model="grade">
              <el-radio-button label="低"></el-radio-button>
              <el-radio-button label="中"></el-radio-button>
              <el-radio-button label="高"></el-radio-button>
              <el-radio-button label="紧急"></el-radio-button>
              <el-radio-button label="严重"></el-radio-button>
            </el-radio-group>
          </div>
        </div>


        <div class="row">
          <div>描述</div>
          <div>
            <div style="width:60%">
              <el-input
                type="textarea" width="40%"
                :autosize="{ minRows: 6, maxRows: 12}"
                placeholder="请输入内容" resize="none" show-word-limit maxlength="200"
                v-model="description">
              </el-input>
            </div>
          </div>
        </div>

        <div class="row">
          <div> </div>
          <div >
            <el-button type="primary" round style="color:white">提交</el-button>
            <el-button type="success" round style="color:white">清空</el-button>
            <el-button type="info" round style="color:white">返回</el-button>
          </div>
        </div>
      </div>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
import bottom from "../base/bottom";
import top from "../base/top";
import {wordToGrade} from "./data/global";

export default {
  name: "BugEdit",
  components:{bottom,top},
  data(){
    return {
      grade:"中",
      user:"倾风",
      description:'This is description written long long ago. There are risk of breaking when modifying it.',
      title:'没有八哥',
      version:'默认版本'
    }
  },
  mounted(){
    document.body.style.backgroundColor = "#c6e2ff";
  },
  methods:{
    init(){
      let config = {
        url:"/cbug/bug/modify",
        method:"post",
        data:{
          token:"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJle",
          bugId:1234, // 需要通过route.query来获取
          bugName:this.bugName,
          bugGrade:wordToGrade(this.bugGrade),
          bugDescription:this.bugDescription
        }
      }
    }
  }
}
</script>

<style scoped>
*{
  color:black;
}

#bug-edit{
  background-color: #c6e2ff;
}
#create-bug{
  width:90%;
  margin:20px auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background-color: white;
  padding:20px;
  border-radius: 10px;
}
#create-bug .title{
  border-left: 5px solid #53a8ff;
  color:#409eff;
  padding-left: 10px;
  font-size: 20px;
  font-weight: bolder;
  margin-bottom: 10px;
}

/* 表格布局 */
.content .row{
  /*border:1px solid red;*/

  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content > div{
  width:100%;
  padding:10px 0;
}
.content .row >div:first-child{
  width:20%;
  text-align: right;
}
.content .row >div:last-child{
  width:78%;
  text-align: left;
}
</style>
